class SceneEditor extends GuaScene {
    constructor(game) {
        super(game)

        var self = this
        this.levels = game.globalConfig["levels"]

        // 初始化第一关卡
        if (this.levels.length == 0) {
            self.createLevel()
        }
        self.current_level = 1
        self.switchLevel(self.current_level)

        // 切换 scene 
        window.addEventListener('keydown', function(event) {
            if (event.key == "k") {
                game.replaceSceneByName("main")
            }
        })

        // 关卡相关事件
        window.document.getElementById("id-new-level").addEventListener('click', function(event) {
            self.createLevel()
            var level = window.document.getElementById("id-levels").selectedIndex + 2
            var target = window.document.getElementById("id-levels")
            target.innerHTML += level_template(self.levels.length)
            log("new level", level)
            self.switchLevel(level)
        })
        window.document.getElementById("id-levels").addEventListener('change', function(event) {
            var target = event.target 
            var level = target.selectedIndex + 1 
            self.switchLevel(level)
        })

        // 可以添加的元素
        window.document.getElementById("id-add-block").addEventListener('click', function(event) {
            var b = Block(self.game, [50, 250])
            self.items.push(b)
        })

        // 拖拽事件
        this.dragedItem = null
        var rect = this.game.canvas.getBoundingClientRect()
        this.game.canvas.addEventListener('mousedown', function(event) {
            var x = event.clientX - rect.left
            var y = event.clientY - rect.top
            for (let i = 0; i < self.items.length; i++) {
                const element = self.items[i];
                if (pointInItem(x, y, element)) {
                    self.dragedItem = element
                }

            }
        })
        this.game.canvas.addEventListener('mousemove', function(event) {
            var x = event.clientX - rect.left
            var y = event.clientY - rect.top
            if (self.dragedItem) {
                // log('move')
                self.dragedItem.x = x
                self.dragedItem.y = y
            }
        })
        this.game.canvas.addEventListener('mouseup', function(event) {
            self.dragedItem = null
        })
        window.addEventListener('keydown', function(event) {
            if (event.key == 'Delete') {
                if (self.dragedItem) {
                    for (let i = 0; i < self.items.length; i++) {
                        const element = self.items[i]
                        if (self.dragedItem == element) {
                            self.items.splice(i, 1)
                        }
                    }
                }
            }
        })
    }
    createLevel() {
        var items = []
        var paddle = Paddle(this.game)
        var ball = Ball(this.game)
        var block = Block(this.game, [23, 33])
        items.push(paddle)
        items.push(ball)
        items.push(block)
        this.levels.push(items)

    }
    switchLevel(new_level) {
        var self = this
        log("switch", self.current_level)
        if (self.current_level > 1) {
            self.saveCurrentLevel()
        }
        self.current_level = new_level
        self.loadLevel(new_level)
    }
    saveCurrentLevel() {
        var level = this.currentLevel
        var items = JSON.parse(JSON.stringify(this.items)) 
        for (let i = 0; i < items.length; i++) {
            var item = items[i]
            item.image = this.game.imageByName(item.name)
        }
        this.levels[level - 1] = items 
    }
    loadLevel(level) {
        this.items = this.levels[level - 1]
    }
    draw() {
        for (let i = 0; i < this.items.length; i++) {
            const element = this.items[i];
            this.game.drawImage(element)

        }
    }
    update() {

    }


}
var level_template = function(level) {
    var template = `
    <option>${level}</option>
    `
    return template
}